( Day 5.1 ) HTML 元素顯示類型

2023 iThome 鐵人賽

DAY 5

Modern Web

15th鐵人賽 html html教學

189 瀏覽

HTML 的所有元素都有預設的顯示類型，而這些顯示類型是透過 CSS 的 display 屬性進行控制，只有在遇到特殊的網頁版面需求時才需要更動，這篇教學將會介紹 HTML 的元素顯示類型。

原文參考：HTML 元素顯示類型

CSS 的 display 內容

根據 W3.org 的 CSS display 規範，display 常用的內容 ( 值 ) 如下表所示：

值	說明	換行
none	隱藏元素，將該元素從 HTML 結構樹中移除。	X
contents	只顯示元素內容，忽略所有 box 屬性 ( 例如邊界、邊框...等 )。	X
block	「塊級」元素，該元素會強制換行，除非進行 CSS 設定，否則同一個區塊裡，一行只會有一個塊級元素。	O
inline	「行內」元素，該元素會一個接一個連續下去。	X
inline-block	「行內」元素裡「包覆塊級」元素，除了具備塊級元素的特性，也可一個接一個連續下去。	X
inline-table	「行內」元素裡「包覆表格」元素，除了具備表格元素的特性，也可一個接一個連續下去。	X
list-item	「清單項目」元素，該元素作用和 block 類似，並預載清單相關符號樣式。	O
table	「表格」元素，該元素作用和 block 類似。	O
flex	「彈性塊」元素，該元素作用和 block 類似，並可以透過設定，根據外部區塊的尺寸進行彈性縮放。	O
grid	「格狀」元素，，該元素作用和 block 類似，並可以透過設定，進行版面格狀排版。	O

HTML 裡每個元素都有各自預設的顯示類型，下表列出各個元素預設的顯示類型 ( display value )：

元素	display
address、article、aside、blockquote、body、dd、details、div、dl、dt、fieldset、figcaption、figure、footer、form、frame、frameset、h1、h2、h3、h4、h5、h6、header、hr、html、iframe、noframes、legend、p、ul、center、dir、menu、nav、ol、pre、summary、section	block
map、output、q	inline
input、select、img	inline-block
area、datalist、head、link、param、title、style、script	none
table	table
tr	table-row
thead	table-header-group
tbody	table-row-group
tfoot	table-footer-group
caption	table-caption
col	table-column
colgroup	table-column-group
td、th	table-cell
caption	table-caption
li	list-item